<template>
    <el-dialog :title="title" v-model="drawer" width="700px" :append-to-body="true" @close="close" :destroy-on-close="true">
        <el-form :model="form" :rules="rules" size="small" label-width="150px" ref="ruleRefForm" class="refForm">
            <el-form-item label="名称：" prop="name">
                <el-input v-model="form.name" placeholder="输入信息名称项" maxlength="6" :show-word-limit="true"></el-input>
            </el-form-item>
            <el-form-item label="类型：" prop="typeValue">
                <div :class="['type-box', item.value == form.typeValue ? 'activity-color':''] " v-for="(item, index) in typeList" :key="index" 
                     @click="selFormType(item.value)">
                    {{ item.name }}
                </div>
            </el-form-item>
            <el-form-item v-if="form.typeValue != 6 || form.typeValue != 7" label="提示文字：" prop="hintText">
                <el-input v-if="form.typeValue == '1'" type="textarea" v-model="form.hintText"  maxlength="100" :show-word-limit="true"
                    :autosize="{ minRows: 3, maxRows: 8 }" />
                <el-input v-else v-model="form.hintText"  maxlength="20" :show-word-limit="true"></el-input>
            </el-form-item>
            <el-form-item v-if="form.typeValue == 6 || form.typeValue == 7 || form.typeValue == 8" label="选项：" prop="optionList">
                <el-input type="textarea" v-model="form.optionList" placeholder="示例：&#10;A&#10;B&#10;C"
                    :maxlength="form.typeValue == 7 ? 180 : 2600" :autosize="{ minRows: 4, maxRows: 8 }" />
                <span v-if="form.typeValue == 7" style="color: #999;">每一行一个选项，总字符数不能超过180个字</span>
                <span v-else style="color: #999;">每一行一个选项，每行最多不超过50个字，最多50行</span>
            </el-form-item>
            <el-form-item v-if="form.typeValue == 2" label="精确位数：" prop="preciseNum">
                <el-radio-group v-model="form.preciseNum">
                    <el-radio :label="0">整数</el-radio>
                    <el-radio :label="1">小数点后1位</el-radio>
                    <el-radio :label="2">小数点后2位</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.typeValue == 3" label="输入位数：" prop="inputNum">
                <el-radio-group v-model="form.inputNum">
                    <el-radio :label="0">限定11位</el-radio>
                    <el-radio :label="1">限定7-11位</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.typeValue == 9" label="日期类型：" prop="dateType">
                <el-radio-group v-model="form.dateType">
                    <el-radio :label="0">指定日期</el-radio>
                    <el-radio :label="1">日期区间</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.typeValue == 9 && form.dateType == 0" label="精确程度：" prop="preciseLevel">
                <el-radio-group v-model="form.preciseLevel">
                    <el-radio :label="0">精确到日期</el-radio>
                    <el-radio :label="1">精确到小时</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.preciseLevel == 1" label="屏蔽时间：" prop="isShieldTime">
                <el-radio-group v-model="form.isShieldTime">
                    <el-radio :label="0">不屏蔽</el-radio>
                    <el-radio :label="1">屏蔽</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.isShieldTime == 1">
                <div class="times-box">
                    <div :class="[item.activity == 1 ? 'not-time-text' : 'time-text']" v-for="(item, index) in disableTimes"
                        :key="index">
                        <span @click="item.activity = !item.activity">{{ item.label }}</span>
                    </div>
                </div>
            </el-form-item>
            <!-- 日期选择 -->
            <!-- <el-form-item label="屏蔽日期" prop="isShieldDate">
                <el-radio-group v-model="form.isShieldDate">
                    <el-radio :label="0">不屏蔽</el-radio>
                    <el-radio :label="1">屏蔽</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <div class="mainBox">
                    <el-calendar v-model="value" />
                </div>
            </el-form-item> -->
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button size="small" @click="close">取消</el-button>
                <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { computed, reactive, toRefs, ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { useFormList } from '/@/stores/formSetting'
import api from '/@/api/commonAPi'

export default {
    name: 'FormTypeDetail',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default() {
                return {}
            }
        },
        title: {
            type: String,
            default: '添加信息项'
        },
        isEdit: {
            type: Boolean,
            default: false
        }
    },
    components: {

    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer, defaultForm, title, isEdit } = toRefs(props)
        const ruleRefForm = ref()
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        let form = computed({
            get: () => defaultForm.value,
            set: val => {
                context.emit('update:defaultForm', val)
            }
        })
        const formStores = useFormList();
        const state = reactive({
            selIdx: 0,
            placeholderVal: '请输入',
            typeList: [
                {name: '单行文本', value: 0},
                {name: '多行文本', value: 1},
                {name: '数字', value: 2},
                {name: '手机号', value: 3},
                {name: '邮箱', value: 4},
                {name: '身份证', value: 5},
                {name: '单选按钮', value: 6},
                {name: '多选按钮', value: 7},
                {name: '下拉选项', value: 8},
                {name: '日期选择', value: 9},
                {name: '图片上传', value: 10},
                {name: '文件上传', value: 11},
            ],
            disableTimes: [
                { label: '00:00', value: 0, activity: 1 },
                { label: '01:00', value: 1, activity: 1 },
                { label: '02:00', value: 2, activity: 1 },
                { label: '03:00', value: 3, activity: 1 },
                { label: '04:00', value: 4, activity: 1 },
                { label: '05:00', value: 5, activity: 1 },
                { label: '06:00', value: 6, activity: 1 },
                { label: '07:00', value: 7, activity: 0 },
                { label: '08:00', value: 8, activity: 0 },
                { label: '09:00', value: 9, activity: 0 },
                { label: '10:00', value: 10, activity: 0 },
                { label: '11:00', value: 11, activity: 0 },
                { label: '12:00', value: 12, activity: 0 },
                { label: '13:00', value: 13, activity: 0 },
                { label: '14:00', value: 14, activity: 0 },
                { label: '15:00', value: 15, activity: 0 },
                { label: '16:00', value: 16, activity: 0 },
                { label: '17:00', value: 17, activity: 0 },
                { label: '18:00', value: 18, activity: 0 },
                { label: '19:00', value: 19, activity: 0 },
                { label: '20:00', value: 20, activity: 0 },
                { label: '21:00', value: 21, activity: 0 },
                { label: '22:00', value: 22, activity: 1 },
                { label: '23:00', value: 23, activity: 1 },
            ],
            rules: {
                name: [{
                    required: true,
                    message: '请输入信息名称项',
                    trigger: 'blur'
                }]
            },
            selectDate: [],//选中的日期
        })
        // 关闭当前页面
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        // 提示语
        const typePlaceVal = (val) => {
            if (val == 8 || val == 9) {
                form.value.hintText = '请选择'
            } else if (val == 10) {
                form.value.hintText = '请上传图片'
            } else if (val == 11) {
                form.value.hintText = '请上传文件'
            } else {
                form.value.hintText = '请输入'
            }
        }
        // 选择类型
        const selFormType = (val) => {
            form.value.typeValue = val
            form.value.typeName = state.typeList[val].name
            typePlaceVal(val)
        }
        // 确定添加
        const submitForm = async (formEl) => {
            if (!formEl) return
            await formEl.validate((valid) => {
                if (valid) {
                    if (isEdit.value) {
                        if(form.value.typeValue == 9 && form.value.isShieldTime == 1){
                            form.value.shieldTimeList = state.disableTimes
                        }
                        // 新增还是编辑
                        if (title.value == '编辑信息项') {
                            api.editFormSetting(form.value).then(res => {
                                ElMessage.success("编辑成功")
                                context.emit('onSubmit', [])
                            })
                        }else {
                            if(form.value.typeValue == 6 || form.value.typeValue == 7 || form.value.typeValue == 8) {
                                if (typeof(form.value.optionList) == 'string') {
                                    let options = form.value.optionList.split("\n")
                                    let optionList = []
                                    options.forEach((item, idx) => {
                                        optionList.push({
                                            formType: form.value.typeValue,
                                            label: item,
                                            value: idx
                                        })
                                    })
                                    form.value.optionList = optionList
                                }
                            }
                            api.saveFormSetting(form.value).then(res => {
                                ElMessage.success("添加成功")
                                context.emit('onSubmit', [])
                            })
                        }
                    }else {
                        let oldList = JSON.parse(JSON.stringify(formStores.table))
                        if(form.value.typeValue == 9 && form.value.isShieldTime == 1){
                            form.value.shieldTimeList = state.disableTimes
                        }
                        let list = []
                        for (let index = 0; index < oldList.length; index++) {
                            list.push({
                                name: oldList[index].name,
                                typeValue: oldList[index].typeValue,
                                typeName: oldList[index].typeName,
                                hintText: oldList[index].hintText,
                                optionList: oldList[index].optionList,
                                preciseNum: oldList[index].preciseNum,
                                inputNum: oldList[index].inputNum,
                                dateType: oldList[index].dateType,
                                isRequired: oldList[index].isRequired,
                                preciseLevel: oldList[index].preciseLevel,
                                isShieldTime: oldList[index].isShieldTime,
                                shieldTimeList: oldList[index].shieldTimeList,
                                isShieldDate: oldList[index].isShieldDate,
                                shieldDateList: oldList[index].shieldDateList,
                                idx: index, // 标识
                            })
                        }      
                        if (title.value == '添加信息项') {  
                            form.value.idx = list.length                                                   
                            list.push(JSON.parse(JSON.stringify(form.value)))
                            context.emit('onSubmit', list)
                            ElMessage.success("添加成功")
                        }else {
                            for (let index = 0; index < list.length; index++) {
                                if(list[index].idx == form.value.idx){
                                    list[index] = JSON.parse(JSON.stringify(form.value))
                                    break
                                }
                            }
                            context.emit('onSubmit', list)
                            ElMessage.success("更改成功")
                        }
                    }
                    context.emit('update:dialogDrawer', false)
                }
            })
        }

        onMounted(() => {
            if(title.value == '编辑信息项') {
                state.disableTimes = form.value.shieldTimeList
            }            
        })

        return {
            drawer,
            form,
            title,
            close,
            submitForm,
            ruleRefForm,
            selFormType,
            typePlaceVal,
            ...toRefs(state)
        }
    }

}
</script>

<style lang="scss" scoped>
.times-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100% - 30px);
    padding-bottom: 16px;
    font-size: 13px;
    color: #333;
    border: 1px solid #e3e2e8;
}

.time-text {
    display: inline-block;
    width: 48px;
    height: 17px;
    margin-left: 17px;
    margin-top: 12px;
    cursor: pointer;
}

.not-time-text {
    display: inline-block;
    width: 48px;
    height: 17px;
    margin-left: 17px;
    margin-top: 12px;
    cursor: pointer;
    text-decoration: line-through;
    color: #c3c3c3;
}

.mark1 {
    color: white !important;
    background: #1890ff !important;
    border-radius: 50%;
}


.type-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 98px;
    height: 32px;
    margin-right: 8px;
    margin-bottom: 8px;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
}

.activity-color {
    border-color: #fe714b;
    color: #fe714b;
}


</style>